import './App.css';
import { Outlet } from 'react-router-dom';
import { Provider } from "react-redux";
import { store, persistor } from "./store/index";
import { PersistGate } from 'redux-persist/integration/react';
import { useEffect } from "react";
import { useNavigate, useLocation   } from 'react-router-dom';

function App() {
  const token = localStorage.getItem('token');
  const navigate = useNavigate();
  const location = useLocation();
  // 类似于vue中的路由守卫
  useEffect(() => {
    if(!token && location.pathname !== '/login') {
      navigate('login');
    }
  });
  return (
    <>
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <div className="content">
            <Outlet />
          </div>
        </PersistGate>
      </Provider>
    </>
  );
}
export default App;
